<!--
 * @Author       : Hejh(3010733382@qq.com)
 * @Version      : V1.0
 * @Date         : 2024-02-06 20:28:08
 * @Description  : 用户空间概览表格
-->

<template>
  <div class="flex pb-4 justify-between my-con">
    <wp-data-table
      v-loading="loading"
      class="min-w-[400px] w-[800px] my-table min-h-[460px]"
      :data="data"
      :checked-row-keys="checkedRowKeys"
      :columns="columns"
      @item-click="handleItemClick"
      @page-change="handlePageChange"
      @select-change="handleSelectChange"
      :pages="pageResultInfo.pages"
      :total="pageResultInfo.total"
      :is-sort="false"
    >
    </wp-data-table>

    <pie-chart
      chart-id="user-space-pie-chart"
      :target-type="1"
      :target-id="checkedRowKeys[0]?.id || '-1'"
      :subTitle="checkedRowKeys[0]?.username || ''"
    >
    </pie-chart>
  </div>
</template>

<script lang="ts" setup>
import { type DataTableColumns } from 'naive-ui'
import { getUsers } from '@/api/user'
import type { UserSpaceRowData, UserNotDepRes } from '@/types/user'
import { formatTime, convertFromBytes } from '@/utils'
import { renderUserAvator } from '@/utils/commonBusiness'

const data = ref<UserNotDepRes[]>([])

const handleItemClick = (row: UserSpaceRowData) => {
  console.log(row, 'row')

  checkedRowKeys.value = [row]
}

const pageInfo = reactive({
  page: 1,
  pageSize: 50
})

const pageResultInfo = reactive({
  pages: 0,
  total: 0
})
const loading = ref(false)

const handlePageChange = (page?: number, pageSize?: number) => {
  page && (pageInfo.page = page)
  pageSize && (pageInfo.pageSize = pageSize)
  loadUsers()
}

const handleSelectChange = (keys: any[], rows: UserSpaceRowData[]) => {
  checkedRowKeys.value = rows
  // console.log(rows)
}

const createColumns = (): DataTableColumns<UserSpaceRowData> => {
  return [
    {
      type: 'selection',
      multiple: false,
      minWidth: 30,
      width: 30
    },
    {
      title: '用户',
      key: 'username',
      minWidth: 150,
      width: 150,
      render: (row) => {
        return renderUserAvator(row.avator as string, row.username as string)
      }
    },
    {
      title: '已使用容量',
      key: 'sizeUse',
      minWidth: 120,
      width: 120,
      render(row) {
        return convertFromBytes(row.sizeUse)
      }
    },
    {
      title: '最近登录时间',
      key: 'lastLogin',
      minWidth: 150,
      width: 150,
      render(row) {
        return formatTime(row.lastLogin)
      }
    },
    {
      title: '创建时间',
      key: 'createTime',
      minWidth: 150,
      width: 150,
      render(row) {
        return formatTime(row.createTime)
      }
    }
  ]
}

const checkedRowKeys = ref<UserSpaceRowData[]>([])

const columns = createColumns()

const loadUsers = () => {
  loading.value = true
  getUsers(pageInfo)
    .then((res) => {
      data.value = res.data.items
      pageResultInfo.pages = res.data.pages
      pageResultInfo.total = res.data.total
    })
    .catch(console.error)
    .finally(() => {
      loading.value = false
    })
}

onMounted(() => {
  loadUsers()
})
</script>
<style scoped lang="scss">
@media (max-width: 1200px) {
  .my-con {
    justify-content: center !important;
    flex-wrap: wrap;
    .my-table {
      width: 100%;
    }

    .chart {
      width: 100%;
      margin-top: 12px;
    }
  }
}
</style>
